<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>历史数据回顾</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../libs/layui/css/layui.css" media="all">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .history-container {
            padding: 20px;
            background-color: #f2f2f2;
            min-height: 100vh;
        }
        
        .filter-panel {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .chart-container {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .data-table {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="history-container">
        <!-- 筛选面板 -->
        <div class="filter-panel">
            <h2><i class="layui-icon layui-icon-time"></i> 历史数据回顾</h2>
            <div class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">选择交叉口</label>
                        <div class="layui-input-inline">
                            <select name="intersection" lay-filter="intersection">
                                <option value="">全部交叉口</option>
                                <option value="intersection1">人民路-解放路交叉口</option>
                                <option value="intersection2">中山路-建设路交叉口</option>
                                <option value="intersection3">胜利路-和平路交叉口</option>
                                <option value="intersection4">光明路-友谊路交叉口</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">开始日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="startDate" id="startDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">结束日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="endDate" id="endDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-inline">
                            <select name="timeRange" lay-filter="timeRange">
                                <option value="all">全天</option>
                                <option value="morning">早高峰 (7:00-9:00)</option>
                                <option value="noon">午高峰 (11:30-13:30)</option>
                                <option value="evening">晚高峰 (17:00-19:00)</option>
                                <option value="night">夜间 (22:00-6:00)</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search">
                            <i class="layui-icon layui-icon-search"></i> 查询
                        </button>
                        <button class="layui-btn layui-btn-primary" onclick="exportData()">
                            <i class="layui-icon layui-icon-export"></i> 导出
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 历史趋势图表 -->
        <div class="chart-container">
            <h3><i class="layui-icon layui-icon-chart"></i> 历史交通流变化趋势</h3>
            <div id="historyChart" style="height: 400px;"></div>
        </div>
        
        <!-- 历史数据表格 -->
        <div class="data-table">
            <h3><i class="layui-icon layui-icon-table"></i> 历史数据详情</h3>
            <table class="layui-table" lay-even lay-skin="line" lay-size="sm">
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>交叉口</th>
                        <th>方向</th>
                        <th>车流量</th>
                        <th>平均车速</th>
                        <th>排队长度</th>
                        <th>信号周期</th>
                        <th>拥堵指数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2024-01-15 14:30</td>
                        <td>人民路-解放路</td>
                        <td>南向直行</td>
                        <td>1,234</td>
                        <td>45 km/h</td>
                        <td>12 辆</td>
                        <td>120 秒</td>
                        <td><span class="layui-badge layui-bg-green">2.3</span></td>
                    </tr>
                    <tr>
                        <td>2024-01-15 14:25</td>
                        <td>人民路-解放路</td>
                        <td>东向左转</td>
                        <td>856</td>
                        <td>38 km/h</td>
                        <td>8 辆</td>
                        <td>120 秒</td>
                        <td><span class="layui-badge layui-bg-orange">3.1</span></td>
                    </tr>
                    <tr>
                        <td>2024-01-15 14:20</td>
                        <td>人民路-解放路</td>
                        <td>北向直行</td>
                        <td>1,456</td>
                        <td>52 km/h</td>
                        <td>6 辆</td>
                        <td>120 秒</td>
                        <td><span class="layui-badge layui-bg-green">1.8</span></td>
                    </tr>
                    <tr>
                        <td>2024-01-15 14:15</td>
                        <td>人民路-解放路</td>
                        <td>西向右转</td>
                        <td>678</td>
                        <td>41 km/h</td>
                        <td>4 辆</td>
                        <td>120 秒</td>
                        <td><span class="layui-badge layui-bg-blue">2.7</span></td>
                    </tr>
                    <tr>
                        <td>2024-01-15 14:10</td>
                        <td>中山路-建设路</td>
                        <td>南向直行</td>
                        <td>1,123</td>
                        <td>43 km/h</td>
                        <td>15 辆</td>
                        <td>135 秒</td>
                        <td><span class="layui-badge layui-bg-red">4.2</span></td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 分页 -->
            <div class="layui-box layui-laypage layui-laypage-default">
                <a href="javascript:;" class="layui-laypage-prev layui-disabled">上一页</a>
                <span class="layui-laypage-curr">
                    <em class="layui-laypage-em"></em>
                    <em>1</em>
                </span>
                <a href="javascript:;">2</a>
                <a href="javascript:;">3</a>
                <a href="javascript:;">4</a>
                <a href="javascript:;">5</a>
                <a href="javascript:;" class="layui-laypage-next">下一页</a>
                <span class="layui-laypage-limits">
                    <select lay-ignore="">
                        <option value="10" selected="">10 条/页</option>
                        <option value="20">20 条/页</option>
                        <option value="30">30 条/页</option>
                        <option value="40">40 条/页</option>
                        <option value="50">50 条/页</option>
                    </select>
                </span>
                <span class="layui-laypage-count">共 156 条</span>
            </div>
        </div>
    </div>

    <script src="../../libs/layui/layui.js"></script>
    <script>
        layui.use(['element', 'form', 'laydate', 'layer'], function(){
            var element = layui.element;
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            
            // 日期选择器
            laydate.render({
                elem: '#startDate',
                type: 'date'
            });
            
            laydate.render({
                elem: '#endDate',
                type: 'date'
            });
            
            // 初始化历史图表
            initHistoryChart();
            
            // 表单提交事件
            form.on('submit(search)', function(data){
                console.log('查询历史数据:', data.field);
                layer.msg('正在查询历史数据...', {icon: 16, time: 2000});
                
                // 模拟查询完成后更新图表
                setTimeout(function() {
                    updateHistoryChart(data.field);
                    layer.msg('查询完成！', {icon: 1});
                }, 2000);
                
                return false;
            });
            
            // 交叉口选择事件
            form.on('select(intersection)', function(data){
                console.log('选择交叉口:', data.value);
            });
            
            // 时间范围选择事件
            form.on('select(timeRange)', function(data){
                console.log('选择时间范围:', data.value);
            });
            
            // 导出数据
            window.exportData = function() {
                layer.confirm('确定要导出当前查询结果吗？', {
                    icon: 3,
                    title: '确认导出'
                }, function(index) {
                    layer.msg('正在导出数据...', {icon: 16, time: 3000});
                    setTimeout(function() {
                        layer.msg('数据导出成功！', {icon: 1});
                    }, 3000);
                    layer.close(index);
                });
            };
        });
        
        // 初始化历史图表
        function initHistoryChart() {
            var chart = echarts.init(document.getElementById('historyChart'));
            
            // 生成历史数据（过去24小时，每小时一个点）
            var timeLabels = [];
            var trafficData = [];
            var speedData = [];
            var congestionData = [];
            var now = new Date();
            
            for (var i = 23; i >= 0; i--) {
                var time = new Date(now.getTime() - i * 60 * 60 * 1000);
                timeLabels.push(time.getHours() + ':00');
                
                // 模拟不同时段的交通流量
                var hour = time.getHours();
                var baseFlow = 1000;
                if (hour >= 7 && hour <= 9) {
                    baseFlow = 1500; // 早高峰
                } else if (hour >= 11 && hour <= 13) {
                    baseFlow = 1200; // 午高峰
                } else if (hour >= 17 && hour <= 19) {
                    baseFlow = 1800; // 晚高峰
                } else if (hour >= 22 || hour <= 6) {
                    baseFlow = 600; // 夜间
                }
                
                trafficData.push(Math.floor(baseFlow + (Math.random() - 0.5) * 200));
                speedData.push(Math.floor(50 - (trafficData[trafficData.length - 1] - 1000) / 50));
                congestionData.push((trafficData[trafficData.length - 1] / 1000).toFixed(1));
            }
            
            var option = {
                title: {
                    text: '历史交通流变化趋势',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        color: '#333'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    formatter: function(params) {
                        var result = params[0].name + '<br/>';
                        params.forEach(function(item) {
                            var unit = '';
                            if (item.seriesName === '车流量') unit = ' 辆/小时';
                            else if (item.seriesName === '平均车速') unit = ' km/h';
                            else if (item.seriesName === '拥堵指数') unit = '';
                            result += item.seriesName + ': ' + item.value + unit + '<br/>';
                        });
                        return result;
                    }
                },
                legend: {
                    data: ['车流量', '平均车速', '拥堵指数'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: timeLabels,
                    axisLabel: {
                        rotate: 45,
                        fontSize: 10
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '车流量(辆/小时)',
                        position: 'left',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '平均车速(km/h)',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '车流量',
                        type: 'line',
                        yAxisIndex: 0,
                        data: trafficData,
                        smooth: true,
                        lineStyle: {
                            color: '#5470c6',
                            width: 3
                        },
                        itemStyle: {
                            color: '#5470c6'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(84, 112, 198, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(84, 112, 198, 0.1)'
                                }]
                            }
                        }
                    },
                    {
                        name: '平均车速',
                        type: 'line',
                        yAxisIndex: 1,
                        data: speedData,
                        smooth: true,
                        lineStyle: {
                            color: '#91cc75',
                            width: 2
                        },
                        itemStyle: {
                            color: '#91cc75'
                        }
                    },
                    {
                        name: '拥堵指数',
                        type: 'line',
                        yAxisIndex: 0,
                        data: congestionData,
                        smooth: true,
                        lineStyle: {
                            color: '#ee6666',
                            width: 2,
                            type: 'dashed'
                        },
                        itemStyle: {
                            color: '#ee6666'
                        }
                    }
                ]
            };
            
            chart.setOption(option);
            
            // 响应式处理
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 更新历史图表
        function updateHistoryChart(filterData) {
            var chart = echarts.getInstanceByDom(document.getElementById('historyChart'));
            if (!chart) return;
            
            // 根据筛选条件生成不同的数据
            var timeLabels = [];
            var trafficData = [];
            var speedData = [];
            var congestionData = [];
            
            // 根据时间范围生成数据
            var dataPoints = 24; // 默认24小时
            var timeRange = filterData.timeRange || 'all';
            
            if (timeRange === 'morning') {
                dataPoints = 2; // 早高峰2小时
            } else if (timeRange === 'noon') {
                dataPoints = 2; // 午高峰2小时
            } else if (timeRange === 'evening') {
                dataPoints = 2; // 晚高峰2小时
            } else if (timeRange === 'night') {
                dataPoints = 8; // 夜间8小时
            }
            
            var now = new Date();
            for (var i = dataPoints - 1; i >= 0; i--) {
                var time = new Date(now.getTime() - i * 60 * 60 * 1000);
                timeLabels.push(time.getHours() + ':00');
                
                // 根据交叉口和时间范围调整数据
                var baseFlow = 1000;
                var hour = time.getHours();
                
                if (timeRange === 'morning' && hour >= 7 && hour <= 9) {
                    baseFlow = 1500;
                } else if (timeRange === 'noon' && hour >= 11 && hour <= 13) {
                    baseFlow = 1200;
                } else if (timeRange === 'evening' && hour >= 17 && hour <= 19) {
                    baseFlow = 1800;
                } else if (timeRange === 'night' && (hour >= 22 || hour <= 6)) {
                    baseFlow = 600;
                }
                
                // 根据选择的交叉口调整数据
                if (filterData.intersection) {
                    baseFlow += Math.floor(Math.random() - 0.5) * 300;
                }
                
                trafficData.push(Math.floor(baseFlow + (Math.random() - 0.5) * 200));
                speedData.push(Math.floor(50 - (trafficData[trafficData.length - 1] - 1000) / 50));
                congestionData.push((trafficData[trafficData.length - 1] / 1000).toFixed(1));
            }
            
            // 更新图表
            chart.setOption({
                xAxis: {
                    data: timeLabels
                },
                series: [
                    {
                        data: trafficData
                    },
                    {
                        data: speedData
                    },
                    {
                        data: congestionData
                    }
                ]
            });
            
            // 更新表格数据
            updateHistoryTable(trafficData, speedData, congestionData, timeLabels);
        }
        
        // 更新历史数据表格
        function updateHistoryTable(trafficData, speedData, congestionData, timeLabels) {
            var tableBody = document.querySelector('.layui-table tbody');
            if (!tableBody) return;
            
            // 清空现有数据
            tableBody.innerHTML = '';
            
            // 生成新的表格数据
            var intersections = ['人民路-解放路', '中山路-建设路', '胜利路-和平路', '光明路-友谊路'];
            var directions = ['南向直行', '东向左转', '北向直行', '西向右转'];
            
            for (var i = 0; i < Math.min(trafficData.length, 5); i++) {
                var row = document.createElement('tr');
                var intersection = intersections[Math.floor(Math.random() * intersections.length)];
                var direction = directions[Math.floor(Math.random() * directions.length)];
                var time = timeLabels[i] || '14:30';
                var traffic = trafficData[i] || 1234;
                var speed = speedData[i] || 45;
                var queue = Math.floor(Math.random() * 20) + 5;
                var cycle = Math.floor(Math.random() * 30) + 105;
                var congestion = congestionData[i] || '2.3';
                
                var congestionClass = 'layui-bg-green';
                if (congestion > 3) congestionClass = 'layui-bg-red';
                else if (congestion > 2.5) congestionClass = 'layui-bg-orange';
                else if (congestion > 2) congestionClass = 'layui-bg-blue';
                
                row.innerHTML = 
                    '<td>2024-01-15 ' + time + '</td>' +
                    '<td>' + intersection + '</td>' +
                    '<td>' + direction + '</td>' +
                    '<td>' + traffic.toLocaleString() + '</td>' +
                    '<td>' + speed + ' km/h</td>' +
                    '<td>' + queue + ' 辆</td>' +
                    '<td>' + cycle + ' 秒</td>' +
                    '<td><span class="layui-badge ' + congestionClass + '">' + congestion + '</span></td>';
                
                tableBody.appendChild(row);
            }
        }
    </script>
</body>
</html>
